<template>
  <div style="height:750px">
    <div style="height:700px">
      <el-table
        :data="
        content.slice((currentPage - 1) * pagesize, currentPage * pagesize)
      "
        style="width: 100%"
        :row-class-name="tableRowClassName"
      >
        <el-table-column label="用户id" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="用户名" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.username }}</span>
          </template>
        </el-table-column>

        <el-table-column label="性别" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.sex }}</span>
          </template>
        </el-table-column>

        <el-table-column label="用户年龄" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.age }}</span>
          </template>
        </el-table-column>
        <el-table-column label="电话" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.tel }}</span>
          </template>
        </el-table-column>
        <el-table-column label="地址" width="180">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.addr }}</span>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button size="mini" type="info" @click="resetPass(scope.$index, scope.row)">重置密码</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input :disabled="true" v-model="form.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户性别" :label-width="formLabelWidth">
          <el-radio-group v-model="form.sex" size="medium">
            <el-radio border label="男"></el-radio>
            <el-radio border label="女"></el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item label="年龄" :label-width="formLabelWidth">
          <el-input v-model="form.age" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input v-model="form.tel" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="form.addr" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="update()">确 定</el-button>
      </div>
    </el-dialog>
    <div class="yema">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        ::current-page-sync="currentPage"
        :page-sizes="[8, 10, 15]"
        :page-size="pagesize"
        layout="total,jumper,prev, pager, next,sizes"
        :total="content.length"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: 3,
      currentPage: 1,
      pagesize: 8,
      content: [],
      dialogFormVisible: false,
      form: {
        username: "",
        age: "",
        sex: "",
        tel: "",
        addr: "",
      },
      formLabelWidth: "120px",
    };
  },
  mounted() {
    this.showTable();
  },
  methods: {
    showTable() {
      let that = this;
      let params = {
        id: that.id,
      };
      that
        .$axios({
          method: "post",
          params: params,
          url: "/user/findWorkers",
        })
        .then(function (res) {
          that.content = res.data.result;
          console.log(res.data.result);
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    tableRowClassName({ rowIndex }) {
      if (rowIndex === 1) {
        return "warning-row";
      } else if (rowIndex === 3) {
        return "success-row";
      }
      return "";
    },
    handleSizeChange: function (size) {
      this.pagesize = size;
    },
    handleCurrentChange: function (currentPage) {
      this.currentPage = currentPage;
    },
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      console.log(row);
      this.form = row;
      this.index = index;
    },
    resetPass(index, row) {
      this.index = index;
        console.log(row);
      this.$axios({
        method: "post",
        data: row,
        url: "/user/resetPass",
      })
        .then((res) => {
          console.log(res);
          this.$message.success("已重置密码");
        })
        .catch(function (error) {
          console.log(error);
        });
    },

    update() {
      this.$axios({
        method: "post",
        data: this.form,
        url: "/user/updateCustomer",
      })
        .then((res) => {
          if (res.data.code == 200) {
            this.showTable();
            this.dialogFormVisible = false;
            this.$message.success("修改用户信息成功");
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    cancel() {
      this.dialogFormVisible = false;
      this.showTable();
    },
    handleDelete(row) {
      if (confirm("确定删除该用户吗")) {
        this.$axios({
          method: "post",
          params: {
            id: row.id,
          },
          url: "/user/deleteUser",
        }).then((res) => {
          if (res.data.code == 200) {
            this.$message.success("删除成功");
            this.showTable();
          }
        });
      }
    },
  },
};
</script>
<style scoped>
</style>
